<template>
  <!-- 属性原始数据查看 -->
  <el-dialog
    :title=title
    :visible.sync="open"
    width="30%"
  >

    <!-- 详细信息JSON展示 -->
    <pre><code v-if="open" class="hljs" v-html="highlightedCode()"></code></pre>

    <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </span>

  </el-dialog>
</template>

<script>
import hljs from 'highlight.js/lib/highlight'
import 'highlight.js/styles/github-gist.css'

hljs.registerLanguage('json', require('highlight.js/lib/languages/json'))
export default {
  name: 'ValueDetails',
  data() {
    return {
      // 标题
      title: null,
      // 打开状态
      open: false,
      // 详情数据
      data: null
    }
  },
  methods: {
    /** 查看详情 */
    openDetails(data, title) {
      this.title = title || '详情信息'
      this.open = true
      this.data = data
    },

    /** json code 高亮显示*/
    highlightedCode() {
      const data = JSON.stringify(this.data, null, 2) || ''
      const result = hljs.highlight('json', data, true)
      return result.value || '&nbsp;'
    }
  }
}
</script>
